import { Meta, Story, Props, Canvas } from '@storybook/addon-docs/blocks'
import { config, withDesign } from 'storybook-addon-designs'

import Context from '@baserow/modules/core/components/Context'

<Meta
    title="Baserow/Context Menu"
    component={Context}
    parameters={{
        backgrounds: {
            default: 'white',
            values: [
                { name: 'white', value: '#ffffff' },
                { name: 'light', value: '#eeeeee' },
                { name: 'dark', value: '#222222' },
            ],
        },
    }}
    decorators={[withDesign]}
    argTypes={{
        hideOnClickOutside: {
            control: {
                type: 'boolean',
                options: [true, false],
            },
            defaultValue: true,
        },
        overflowScroll: {
            control: {
                type: 'boolean',
                options: [true, false],
            },
            defaultValue: false,
        },
        maxHeightIfOutsideViewport: {
            control: {
                type: 'boolean',
                options: [true, false],
            },
            defaultValue: false,
        },
    }}
/>

# Context Menu

The context menu component is a component that can be used to show a context menu.

export const Template = (args, { argTypes }) => ({
    components: { Context },
    props: Object.keys(argTypes),
    methods: {
        openContext() {
            this.$refs.context.toggle(this.$refs.button)
        },
    },
    template: `<div><Context ref="context" v-bind="$props" ><ul class="context__menu"><li class="context__menu-item"><a class="context__menu-item-link"><i class="context__menu-item-icon iconoir-edit-pencil"></i>
        Rename workspace
      </a></li> <li class="context__menu-item"><a class="context__menu-item-link"><i class="context__menu-item-icon iconoir-community"></i>
        Members
      </a></li> <li class="context__menu-item"><a class="context__menu-item-link"><i class="context__menu-item-icon iconoir-refresh-double"></i>
        View trash
      </a></li> <li class="context__menu-item"><a class="context__menu-item-link"><i class="context__menu-item-icon iconoir-log-out"></i>
        Leave workspace
      </a></li> <li class="context__menu-item context__menu-item--with-separator"><a class="context__menu-item-link context__menu-item-link--delete"><i class="context__menu-item-icon iconoir-bin"></i>
        Delete workspace
      </a></li></ul></Context><button ref="button" @click="openContext">open context</button></div>`,
})

export const TemplateStory2 = (args, { argTypes }) => ({
    components: { Context },
    props: Object.keys(argTypes),
    methods: {
        openContext(e) {
            this.$refs.context.toggleNextToMouse(e)
        },
    },
    template: `<div @click="openContext" style="height: 100vh"><Context ref="context" v-bind="$props" ><ul class="context__menu"><li class="context__menu-item"><a class="context__menu-item-link"><i class="context__menu-item-icon iconoir-edit-pencil"></i>
        Rename workspace
      </a></li> <li class="context__menu-item"><a class="context__menu-item-link"><i class="context__menu-item-icon iconoir-community"></i>
        Members
      </a></li> <li class="context__menu-item"><a class="context__menu-item-link"><i class="context__menu-item-icon iconoir-refresh-double"></i>
        View trash
      </a></li> <li class="context__menu-item"><a class="context__menu-item-link"><i class="context__menu-item-icon iconoir-log-out"></i>
        Leave workspace
      </a></li> <li class="context__menu-item context__menu-item--with-separator"><a class="context__menu-item-link context__menu-item-link--delete"><i class="context__menu-item-icon iconoir-bin"></i>
        Delete workspace
      </a></li></ul></Context><span>Click somewhere to display the context</span></div>`,
})

<Canvas>
    <Story name="Default">{Template.bind({})}</Story>
    <Story
        name="Next to mouse"
        args={{
            hideOnClickOutside: false,
        }}
    >
        {TemplateStory2.bind({})}
    </Story>
</Canvas>

## Example

```javascript
<Context></Context>
```

## Props

<Props of={Context} />
